<template>
  <!-- 有子菜单 -->
  <template v-if="menu.children && menu.children.length > 0">
    <el-sub-menu :index="menu.path.toString()">
      <template #title>
        <i :class="menu.icon || 'el-icon-folder-opened'"></i>
        {{ menu.label }}
      </template>
      <template v-for="child in menu.children" :key="child.value">
        <MenuRecursive :menu="child" />
      </template>
    </el-sub-menu>
  </template>

  <!-- 无子菜单 -->
  <template v-else>
    <el-menu-item :index="menu.path">
      <i :class="menu.icon || 'el-icon-document'"></i>
      {{ menu.label }}
    </el-menu-item>
  </template>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';

const props = defineProps({
  menu: {
    type: Object,
    required: true
  }
});
</script>